<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 导入 Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>
<body>
    <div>
        <!--                            登录弹窗-->
        <div  class="modal fade" id="loginWin" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                    <!--                                        内容-->
                    <div  class="modal-body">

                        <form role="form">
                            <div class="form-group">
                                <label for="exampleInputEmail1">用户名</label>
                                <input v-model="user.username" type="text" class="form-control" id="exampleInputEmail1" />
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">密码</label>
                                <input v-model="user.password" type="password" class="form-control" id="exampleInputPassword1" />
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" style="float: left">注册</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="login">登录</button>
                    </div>
                </div>

            </div>

        </div>


        <div class="row clearfix" style="padding: 100px 90px 10px 90px">
            <div class="col-md-12 column">
                <!--            图片滚动-->
                <span>
                <div class="carousel slide" id="carousel-681150">
                <ol class="carousel-indicators">
                    <li data-slide-to="0" data-target="#carousel-681150">
                    </li>
                    <li data-slide-to="1" data-target="#carousel-681150" class="active">
                    </li>
                    <li data-slide-to="2" data-target="#carousel-681150">
                    </li>
                </ol>

                <div class="carousel-inner">
                    <div class="item">
                        <a href="video/VID_20220722_151029.mp4"><img alt="" src="img/huawei-watch3-gt-pro.jpg" /></a>
                    </div>
                    <div class="item">
                        <a href="video/VID_20220722_151029.mp4"><img alt="" src="img/huawei-watch3-gt-pro.jpg" /></a>
                    </div>
                    <div class="item active">
                        <a href="video/VID_20220722_151029.mp4"><img alt="" src="img/huawei-watch3-gt-pro.jpg" /></a>
                    </div>
                </div>

                <a class="left carousel-control" href="#carousel-681150" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-681150" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
            </span>
            </div>
        </div>

        <div class="row clearfix" v-for="(item,key,index) in arr" style="padding: 0px 90px 10px 90px" :key="item.vid">
            <div  class="col-md-12 column" v-if="index<2">
                <div class="page-header">
                    <h1>{{ key }}</h1>
                </div>
                <!--            视频-->
                <div>
                    <div style="float: right"><a href="#"><small>更多 >></small></a></div>
                    <br>
                    <div>
                    <span  style="width: 210px; height: 200px; margin-right: 8px; display: inline-block" v-for="(temp,index) in item" :key="temp.vid">
                        <div>
                            <a :href="temp.vurl"><img :src="temp.vcover" width="210" height="150" controls="controls" style="border-radius: 5px;"></a>
                        </div>
                    <div style="padding-top: 10px"><small>{{ temp.vtitle }}</small></div>
                    </span>
                    </div>

                </div>
            </div>
        </div>


        <div class="row clearfix" style="padding: 0px 90px 10px 90px" v-for="(item,key,index) in arr" :key="item.vid" >
            <div v-if="index>=2">
                <div class="page-header">
                    <h1>{{ key }}</h1>
                </div>
                <div style="float: right"><a href="#"><small>更多 >></small></a></div>
                <div class="col-md-9 column" style="width: 910px">
                    <div>
                        <br>
                        <div>
                        <span  style="width: 210px; height: 200px; margin-right: 8px; display: inline-block" v-for="(temp,index) in item" :key="temp.vid">
                            <div>
                                <a :href="temp.vurl"><img :src="temp.vcover" width="210" height="150" controls="controls" style="border-radius: 5px;"></a>
                            </div>
                        <div style="padding-top: 10px"><small>{{ temp.vtitle }}</small></div>
                        </span>
                        </div>

                    </div>
                </div>

                <!--            排行榜-->
                <div class="col-md-3 column" style="width: 300px">
                    <div class="tabbable" id="tabs-184209">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <p style="font-size: 30px">排行榜</p>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="panel-979648">
                                <a href="#" style="font-family: Algerian;font-size: 30px " v-for="(temp,index) in item">{{index+1}} {{ temp.vtitle }}<br></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>